body {
    background: url(../images/bg.gif);
}

.sun {
    height: 300px;
    width: 300px;
    /* border: 1px solid; */
    margin: 200px auto;
    transform-style: preserve-3d;
    position: relative;
    /* transform: rotateX(15deg) rotateY(15deg); */
    animation: rotate_big 10s linear infinite;
}

.sun>p {
    width: 300px;
    height: 300px;
    border: 5px solid rgba(255, 8, 8, 0.5);
    border-radius: 50%;
    position: absolute;
    transform-style: preserve-3d;
    box-shadow: 2px 2px 400px rgba(255, 8, 8, 0.7);
}

.sun>p:nth-child(2) {
    transform: rotateX(90deg);
}

.sun>p:nth-child(3) {
    transform: rotatey(90deg);
}

.sun>p span {
    display: block;
    height: 259.8px;
    width: 259.8px;
    border: 5px solid rgba(255, 8, 8, 0.5);
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    box-shadow: 2px 2px 400px rgba(255, 8, 8, 0.7);
}

.sun_1>span:nth-child(1) {
    transform: translatez(75px);
}

.sun_1>span:nth-child(2) {
    transform: translatez(-75px);
}

.sun_2>span:nth-child(1) {
    transform: translatez(75px);
}

.sun_2>span:nth-child(2) {
    transform: translatez(-75px);
}

.sun_3>span:nth-child(1) {
    transform: translatez(75px);
}

.sun_3>span:nth-child(2) {
    transform: translatez(-75px);
}

@keyframes rotate_big {
    0% {
        transform: rotate3d(1, 1, 1, 0deg);
    }
    100% {
        transform: rotate3d(1, 1, 1, 360deg);
    }
}

@keyframes rotate_border {
    0% {
        transform: rotate3d(0, 0, 1, 0deg);
    }
    100% {
        transform: rotate3d(0, 0, 1, 360deg);
    }
}

@keyframes box {
    0% {
        transform: rotatex(80deg) rotateY(10deg) rotateZ(0deg);
    }
    25% {
        transform: rotatex(80deg) rotateY(5deg) rotateZ(0deg);
    }
    50% {
        transform: rotatex(80deg) rotateY(0deg) rotateZ(0deg);
    }
    75% {
        transform: rotatex(80deg) rotateY(5deg) rotateZ(0deg);
    }
    100% {
        transform: rotatex(80deg) rotateY(10deg) rotateZ(10deg);
    }
}


/* 第一轨道 */

.border_1 {
    height: 700px;
    width: 700px;
    border: 2px dotted white;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    transform-style: preserve-3d;
    /* transform: rotatey(90deg); */
    animation: rotate_border 20s linear infinite;
}


/* 第二轨道 */

.border_2 {
    height: 1100px;
    width: 1100px;
    border: 2px dotted white;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    transform-style: preserve-3d;
    animation: rotate_border 30s linear infinite;
}


/* 第三轨道 */

.border_3 {
    height: 1500px;
    width: 1500px;
    border: 2px dotted white;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    transform-style: preserve-3d;
    animation: rotate_border 40s linear infinite;
}


/* 第四轨道 */

.border_4 {
    height: 1900px;
    width: 1900px;
    border: 2px dotted white;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    transform-style: preserve-3d;
    animation: rotate_border 40s linear infinite;
}


/* 总体 */

.box {
    height: 2000px;
    width: 2000px;
    border: 2px dotted white;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    transform-style: preserve-3d;
    /* transform: rotateX(50deg); */
    animation: box 40s linear infinite;
}


/* 第一轨道 */

.di {
    width: 100px;
    height: 100px;
    /* border: 1px solid; */
    transform-style: preserve-3d;
    animation: rotate_big 10s linear infinite;
    position: absolute;
    left: 50px;
    top: 50px;
}


/* 第二轨道 */

.huo {
    width: 100px;
    height: 100px;
}


/* 第三轨道 */

.ji {
    width: 150px;
    height: 150px;
    position: absolute;
    left: 150px;
    top: 150px;
}


/* 第四轨道 */

.four {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 225px;
    top: 225px;
}


/* 第一轨道 */

.di>p {
    width: 100px;
    height: 100px;
    border: 5px solid rgba(11, 73, 245, 0.5);
    border-radius: 50%;
    position: absolute;
    transform-style: preserve-3d;
    box-shadow: 2px 2px 200px rgba(11, 73, 245, 0.5);
}


/* 第二轨道 */

.huo>p {
    width: 100px;
    height: 100px;
    border: 5px solid rgba(241, 245, 11, 0.5);
    box-shadow: 2px 2px 400px rgba(241, 245, 11, 0.5);
}


/* 第三轨道 */

.ji>p {
    width: 150px;
    height: 150px;
    border: 5px solid rgba(197, 96, 2, 0.5);
    box-shadow: 2px 2px 400px rgba(197, 96, 2, 0.5);
}


/* 第四轨道 */

.four>p {
    width: 100px;
    height: 100px;
    border: 5px solid rgba(233, 228, 224, 0.5);
    box-shadow: 2px 2px 400px rgba(233, 228, 224, 0.5);
}


/* 第一轨道 */

.di>p:nth-child(2) {
    transform: rotateX(90deg);
}

.di>p:nth-child(3) {
    transform: rotatey(90deg);
}

.di>p span {
    display: block;
    height: 86.6px;
    width: 86.6px;
    border: 5px solid rgba(11, 73, 245, 0.5);
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    box-shadow: 2px 2px 200px rgba(11, 73, 245, 0.5);
}


/* 第二轨道 */

.huo>p span {
    height: 86.6px;
    width: 86.6px;
    border: 5px solid rgba(241, 245, 11, 0.5);
    box-shadow: 2px 2px 400px rgba(241, 245, 11, 0.5);
}


/* 第三轨道 */

.ji>p span {
    height: 129.9px;
    width: 129.9px;
    border: 5px solid rgba(197, 96, 2, 0.5);
    box-shadow: 2px 2px 400px rgba(197, 96, 2, 0.5);
}


/* 第四轨道 */

.four>p span {
    height: 86.6px;
    width: 86.6px;
    border: 5px solid rgba(233, 228, 224, 0.5);
    box-shadow: 2px 2px 200px rgba(233, 228, 224, 0.5);
}


/* 第一轨道 */

.di_1>span:nth-child(1) {
    transform: translatez(25px);
}

.di_1>span:nth-child(2) {
    transform: translatez(-25px);
}

.di_2>span:nth-child(1) {
    transform: translatez(25px);
}

.di_2>span:nth-child(2) {
    transform: translatez(-25px);
}

.di_3>span:nth-child(1) {
    transform: translatez(25px);
}

.di_3>span:nth-child(2) {
    transform: translatez(-25px);
}


/* 第二轨道 */


/* 第三轨道 */

.ji_1>span:nth-child(1) {
    transform: translatez(37.5px);
}

.ji_1>span:nth-child(2) {
    transform: translatez(-37.5px);
}

.ji_2>span:nth-child(1) {
    transform: translatez(37.5px);
}

.ji_2>span:nth-child(2) {
    transform: translatez(-37.5px);
}

.ji_3>span:nth-child(1) {
    transform: translatez(37.5px);
}

.ji_3>span:nth-child(2) {
    transform: translatez(-37.5px);
}


/* 第四轨道 */